<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">知领教师平台</span>
      </div>
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
        class="form-box"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="loginBtn" type="primary" @click="login('form')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <button @click="all()">++</button> -->
    <button @click="getStu()">11</button>
    <button @click="update()">++</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "root",
        password: "1234567",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 7, message: "长度在 3 到 7 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
      students: [],
    };
  },
  beforeMount() {
    localStorage.removeItem("isLogin");
    localStorage.removeItem("id");
  },
  methods: {
    col() {
      console.log(this.form.button, this.form.username, this.form.password);
    },
    login(form) {
      var _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.service
            .post("/login", {
              accounts: this.form.username,
              password: this.form.password,
            })
            .then(function (response) {
              if (response.status === 200) {
                _this.mysqlser
                  .post(
                    "/login",
                    {
                      accounts: _this.form.username,
                      password: _this.form.password,
                    },
                  )
                  .then((response) => {
                    console.log(response);
                    _this.changeMsg();
                  });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
    changeMsg() {
      this.mysqlser
        .get(`/query?accounts=${this.form.username}`)
        .then((response) => {
          console.log(response);
          if (response.data.length === 0) {
            console.log(response.data);
            this.$message({
              message: "帐号或密码错误",
              type: "error",
            });
          } else {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            localStorage.setItem("isLogin", 1);
            localStorage.setItem("id", response.data[0].id);
            localStorage.setItem("level", response.data[0].level);
            this.$router.push("/home");
          }
        });
    },
  },
};
</script>

<style scoped>
.login {
  /* padding: 0; */
  width: 99vw;
  height: 97vh;
  background-color: #f0f5f8;
}
.box-card {
  /* background-color: #f0f5f8; */
  width: 480px;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
}
.title {
  font-size: 28px;
}
.form-box {
  width: 350px;
}
.loginBtn {
  width: 100%;
}
</style>
